<template>
<view :class="'navbar flex-row ' + __device" :style="'background-image: url(' + _navbar.background_image + ')'" v-if="_navbar&&_navbar.navs&&_navbar.navs.length>0">
    <block v-for="(item, index) in _navbar.navs" :key="index">
        <navigator :appId="item.params.appid" class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" openType="navigate" :path="item.params.path" target="miniProgram" :url="item.url" v-if="item.open_type=='wxapp'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="'color: ' + (item.active?item.active_color:item.color) + ';'">{{item.text}}
          </view>
            </view>
        </navigator>
        <navigator @tap="naveClick" class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" :data-tel="item.params.tel" openType="tel" :url="item.url" v-else-if="item.open_type=='tel'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="'color: ' + (item.active?item.active_color:item.color) + ';'">{{item.text}}
          </view>
            </view>
        </navigator>
        <view class="flex-grow-1 flex-y-center" style="width:1%;padding-top:8rpx;" v-else-if="item.open_type=='contact'">
            <view style="width:100%;">
                <button openType="contact" :sessionFrom="_user_info.nickname + '|'">
                    <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                    <view class="navbar-text" :style="'color: ' + (item.active?item.active_color:item.color) + ';'">{{item.text}}
              </view>
                </button>
            </view>
        </view>
        <navigator class="flex-grow-1 flex-y-center" openType="navigate" :url="'/pages/web/web?url=' + item.params.web" v-else-if="item.open_type=='web'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="'color: ' + (item.active?item.active_color:item.color) + ';'">{{item.text}}
          </view>
            </view>
        </navigator>
        <navigator class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" openType="redirect" :url="item.new_url" v-else>
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="'color: ' + (item.active?item.active_color:item.color) + ';'">{{item.text}}
          </view>
            </view>
        </navigator>
    </block>
</view>
</template>

